<div class="container">
     
    <div>
        <button class='btn btn-default btn-xs active inline' ng-click="switchApproved()" >Toggle view</button>
        <p class=inline ng-show="approved">See only approved requests</p>
        <p class=inline ng-show="!approved">See approved and pending requests</p>
    </div>
    <div class='left'>
        <div ng-repeat='f in d' >
            <div ng-show="f.show">
                <table>
                    <tr>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <div style='width:140px'>
                                            <h3>{{f.field.name}}</h3>
                                            <a ng-href="#/schedule/{{f.field.uid}}/all">
                                                Schedule
                                            </a>
                                            <br/>
                                            <a ng-href="#/field/{{f.field.uid}}">
                                                Details
                                            </a>
                                            <p>{{f.field.location}}<br/>{{f.field.use}}<br/>{{f.field.surface}}
                                        </div>
                                    </td>
                                    <td>

                                    </td>
                                    <td>
                                        <table class='t1'>
                                            <tr><td style="width:50px"></td><td class=t1 ng-repeat="d1 in days"><div>&nbsp; {{d1}} &nbsp;</div></td></tr>
                                            <tr ng-repeat='s in f.field.slots' XXng-hide="s === 'Other'">
                                                <td class="t1" style='width:50px'>{{s}} &nbsp; </td>
                                                <td style='background-color: #ddd;' class=t1 ng-repeat="d1 in days">
                                                    <div ng-repeat='x in f[s][d1]'> 
                                                        <div ng-show='(luser.permission === "Administrator" || x.r.owner === luser.uid) && x.status === "submitted"' class=' sched submitted'>
                                                            <a ng-href="#/request/{{x.r.uid}}">
                                                                {{x.t.name}} {{x.r.mapid}} 
                                                            </a> 
                                                            <button ng-show='luser.permission === "Administrator"' class='btn btn-default btn-xs active' ng-click="approve(x)"  >({{x.n}}) Approve</button>
                                                        </div>
                                                        <div ng-show='x.status === "approved"' class=' sched approved'>
                                                            <a ng-href="#/request/{{x.r.uid}}">
                                                                {{x.t.name}} {{x.r.mapid}} ({{x.n}})
                                                            </a>
                                                        </div>
                                                        <div ng-show='x.status === "complete"' class=' sched complete'>
                                                            <a ng-href="#/request/{{x.r.uid}}">
                                                                {{x.t.name}} {{x.r.mapid}} ({{x.n}})
                                                            </a>
                                                        </div>
                                                        <div class='hspace'>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>           
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr><td><div style='border-bottom: solid lightgrey 1px;'>&nbsp;</div><br/></td></tr>
                </table>
            </div>
        </div>
    </div>
</div>